<style>
    .addHidden {
        display: none;
    }

    .treeHead {
        color: rgb(51, 51, 51);
        font-size: 16px;
    }

    .treeChildren {
        color: #48576a;
        font-size: 14px;
    }

    #menu .el-tree-node__children .el-tree-node__content {
        padding-left: 36px !important;
    }

    #menu .el-tree-node__expand-icon {
        margin-top: -3px;
    }

    #menu .el-checkbox__input {
        line-height: -1px;
    }
</style>
<div id="menu">
    <el-row v-loading="showLoading"
            element-loading-text="拼命加载中">
        <el-col :span="24">
            <el-tree
                    ref="dataBaseMenu"
                    :data="dataBaseMenu"
                    node-key="id"
                    show-checkbox
                    accordion
                    :expand-on-click-node="true"
                    :render-content="renderContent">
            </el-tree>
        </el-col>
    </el-row>
    <el-row>
        <el-button type="success">导入菜单</el-button>
        <el-button type="warning" @click="output">导出菜单</el-button>
        <el-button type="danger">删除现有菜单</el-button>
        <el-button type="info" @click="submit">保存更改</el-button>
    </el-row>
</div>

<script>
    var id = 1000;

    function menuForm() {
        return {
            "bmMenuId": "",
            "bmMenuIcon": "",
            "bmParentMenuId": 0,
            "bmMenuName": "",
            "bmOrderNumber": 1,
            "bmMenuLevel": 2,
            "bmMenuUrl": "",

            "bmCreateTime": new Date().toJSON(),
            "bmModifyTime": new Date().toJSON(),
            "bmStatus": 1,
            "bmRemarks": "",
            "bmMenuCode": "",
            "bmMenuType": "",
        }
    }

    var menu = new Vue({
        el: "#menu",
        data: function () {
            return {
                showLoading: false,
                dataBaseMenu: [],
                renderContent: function (h, obj) {
                    var node = obj.node;
                    var data = obj.data;
                    var store = obj.store;

                    return h(
                        'span', {},
                        [
                            h('span', {
                                'class': {
                                    'treeHead': typeof data.children !== 'undefined',
                                    'treeChildren': typeof data.children === 'undefined'
                                }
                            }, data.label || data.head),
                            h('span', {
                                style: {
                                    'float': 'right',
                                    'margin-right': '20px'
                                }
                            }, [h('button', {
                                style: {

                                    /*<prod>*/
                                    display: 'none'
                                    /*</prod>*/

                                },
                                on: {
                                    click: function (e) {
                                        appendMenu(store, data);
                                        e.stopPropagation();
                                    }
                                },
                                'class': {
                                    'el-button': true,
                                    'el-button--mini': true,
                                    'addHidden': typeof data.children === 'undefined'
                                }
                            }, '添加'), h('button', {
                                style: {
                                    display: 'none'
                                },
                                on: {
                                    click: function (e) {
                                        removeMenu(store, data);
                                        e.stopPropagation();
                                    }
                                },
                                'class': {
                                    'el-button': true,
                                    'el-button--danger': true,
                                    'el-button--mini': true
                                }
                            }, '删除')])
                        ]
                    )
                }
            }
        },
        methods: {
            submit: function () {
                var menuStep = {};
                var step = [];
                for (var i = 0; i < this.dataBaseMenu.length; i++) {
                    menuStep = menuForm();
                    menuStep.bmMenuName = this.dataBaseMenu[i].head;
                    menuStep.bmMenuId = this.dataBaseMenu[i].bmMenuId;
                    menuStep.bmMenuLevel = 1;
                    menuStep.bmOrderNumber = i + 1;
                    step.push(menuStep);
                    for (var b = 0; b < this.dataBaseMenu[i].children.length; b++) {
                        menuStep = menuForm();
                        menuStep.bmMenuName = this.dataBaseMenu[i].children[b].label;
                        menuStep.bmMenuUrl = this.dataBaseMenu[i].children[b].url;
                        menuStep.bmMenuIcon = this.dataBaseMenu[i].children[b].bmMenuIcon;
                        menuStep.bmMenuId = this.dataBaseMenu[i].children[b].bmMenuId;
                        menuStep.bmParentMenuId = i + 1;
                        menuStep.bmOrderNumber = b + 1;
                        step.push(menuStep);
                    }
                }

                console.log(JSON.stringify(step));

                /*<prod>*/

//                for (i = 0; i < step.length; i++) {
//                    (function (i) {
//                        $.ajax('/moduleManagement/0', {
//                            type: "GET",
//                            data: step[i],
//                            success: function () {
//                                console.log(step[i].bmMenuName + '已经成功添加！');
//                            }
//                        })
//                    })(i);   //模块管理-新增菜单
//                }

                /*</prod>*/
            },
            output:function () {
                var menuData = menu.$refs.dataBaseMenu.getCheckedNodes();
                var menuStep = {};
                var step = [];
                for (var i = 0; i < menuData.length; i++) {
                    menuStep = menuForm();
                    menuStep.bmMenuName = this.dataBaseMenu[i].head||this.dataBaseMenu[i].bmMenuName;
                    menuStep.bmMenuId = this.dataBaseMenu[i].bmMenuId;
                    step.push(menuStep);
                }
                console.log(JSON.stringify(step));
            }
        }
    });

    menuInit();

    function menuInit() {
        postMenu(menu);
    }

    function getUserMenu() {
        var step = [];

        for (var i = 0; i < app.$data.nav.length; i++) {
            for (var b = 0; b < app.$data.nav[i].children.length; b++) {
                step.push(app.$data.nav[i].children[b])
            }
        }
        Vue.nextTick(function () {
            menu.$refs.dataBaseMenu.setCheckedNodes(step);
        });
    }

    function appendMenu(store, data) {
        store.append({id: id++, label: 'testtest'}, data);
    }

    function removeMenu(store, data) {
        store.remove(data);
    }

    function postMenu(obj, option) {

        /*<debug>*/
        obj.$data.showLoading = true;
        url = "/hock/main/Nav-DB.json";
        $.ajax(url, {
            type: "GET",
            data: option | {
                "draw": 1,                      //* 没有意义
                "pageNum": 1,                   //* 当前页
                "pageSize": 10                  //* 每页大小
            },
            error: function (error) {
            },
            success: function (json) {
                menu.$data.dataBaseMenu = json.data;
                getUserMenu();
            },
            complete: function () {
                obj.$data.showLoading = false;
            }
        });
        /*</debug>*/

        /*<prod>*/
        menu.$data.dataBaseMenu = app.$data.nav;
        getUserMenu();
        /*</prod>*/


    }

    function allPrposCb(obj, cb) {
        for (var p in obj) {
            if (typeof(obj[p]) !== "function") {
                cb(obj[p], p)
            }
        }
    }

</script>